<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="高级检索" name="first" style="text-align: center">
        <h2 :class="{ active: !isActive }">高级检索</h2>
        <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
          <el-form-item prop="generalArchiveList">
            <label :class="{ active: isActive }">全宗名称：</label>
            <el-select placeholder="请选择所属全宗" v-model="dataForm.archiveId" @change="getClassList">
              <el-option v-for="generalArchive in generalArchiveList" :key="generalArchive.id" :label="generalArchive.name" :value="generalArchive.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="generalArchiveList">
            <label :class="{ active: isActive }">档案类型：</label>
            <el-select v-model="dataForm.categoryId" placeholder="档案类型" @change="getFieldList">
              <el-option v-for="category in classList" :key="category.id" :label="category.name" :value="category.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="generalArchiveList">
            <label :class="{ active: isActive }">检索字段：</label>
            <el-select placeholder="检索字段" v-model="dataForm.field">
              <el-option v-for="field in fieldList" :key="field.__vModel__" :label="field.label" :value="field.__vModel__"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="generalArchiveList">
            <label :class="{ active: isActive }">条件：</label>
            <el-select placeholder="包含" v-model="dataForm.condition">
              <el-option value="dy" label="大于">大于</el-option>
              <el-option value="xy" label="小于">小于</el-option>
              <el-option value="dy" label="等于">等于</el-option>
            </el-select>
          </el-form-item>
          <br />
          <br />
          <el-form-item prop="generalArchiveList">
            <label :class="{ active: isActive }">关键值：</label>
            <el-input style="width: 1000px" v-model="dataForm.value" placeholder="根据检索字段输入值" clearable></el-input>
          </el-form-item>
          <el-form-item prop="generalArchiveList">
            <el-button type="primary" :class="{ active: isActive }" style="width: 78px" @click="getDataList()">重置</el-button>
            <el-button type="primary" style="width: 78px" @click="searching">检索</el-button>
          </el-form-item>
          <div :class="{ active: isActive }" style="width: 100%; height: 18px; background-color: rgb(240, 242, 245); position: fixed; left: 244px"></div>

          <!-- <el-form-item prop="generalArchiveList"> </el-form-item>
            <el-form-item prop="generalArchiveList"> </el-form-item>
            <el-form-item prop="generalArchiveList"> </el-form-item> -->
        </el-form>
        <div style="text-align: left" :class="{ active: isActive }">
          <div style="margin: 40px 0 15px">
            <el-button type="primary" style="width: 78px" @click="addOrUpdateHandle()">档案鉴定</el-button>
            <el-button type="primary" style="width: 78px" @click="UsingTheApplication()">利用申请</el-button>
            <el-button type="primary" style="width: 78px">加入收藏</el-button>
          </div>
          <!-- <el-table stripe v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <el-table-column label="题名" prop="code" header-align="center" align="center"></el-table-column>
            <el-table-column label="档号" prop="name" align="center"></el-table-column>
            <el-table-column label="年度" prop="tenantName" header-align="center" align="center"></el-table-column>
            <el-table-column label="保管期限" prop="createDate" header-align="center" align="center"></el-table-column>
            <el-table-column label="组织机构" prop="createDate" header-align="center" align="center"></el-table-column>
          </el-table>
          <el-pagination style="padding: 0px 38%;text-align: right" :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination> -->

          <div>
            <div class="file">
              <img src="/img/icon-ocr-identify.png" alt="" />
              <div>
                <p>深刻的恢复健康的说法会计师</p>
                <span>档号01-001-002类型通用撒顾地科技发哈顺丰科技大精神科发货款圣诞节的空档</span>
              </div>
            </div>
            <div class="file">
              <img src="/img/icon-ocr-identify.png" alt="" />
              <div>
                <p>深刻的恢复健康的说法会计师</p>
                <span>档号01-001-002类型通用撒顾地科技发哈顺丰科技大精神科发货款圣诞节的空档</span>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="全文检索" name="second"><full-text-search /></el-tab-pane>

      <AppraisalAdd v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></AppraisalAdd>
      <UsingRecordsAdd v-if="isUsingVisible" ref="UsingTheApplication" @refreshDataList="getDataList"></UsingRecordsAdd>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import fullTextSearch from "./full-text-search.vue";
import AppraisalAdd from "../archive/appraisal-add.vue";
import UsingRecordsAdd from "../archive/using-records-add.vue";
import { defineComponent, reactive, toRefs } from "vue";
import baseService from "@/service/baseService";
export default defineComponent({
  components: {
    fullTextSearch,
    AppraisalAdd,
    UsingRecordsAdd
  },
  setup() {
    const state = reactive({
      activeName: "first",
      isActive: true,
      isUsingVisible: false,
      generalArchiveList: [],
      classList: [],
      fieldList: [],
      dataForm: {
        archiveId: "",
        categoryId: "",
        condition: "",
        value: "",
        field: ""
      }
    });
    return { ...useView(state), ...toRefs(state) };
  },
  created() {
    baseService.get(`/archive/info/list`).then((res) => {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.generalArchiveList = res.data;
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getClassList(v) {
      return baseService.get("/archive/class/list/no-tree", { archiveId: v }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.classList = res.data;
      });
    },
    getFieldList(v) {
      return baseService.get("/workflow/client/class-field", { id: v }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        console.log(res.data);
        this.fieldList = res.data;
      });
    },
    searching() {
      this.isActive = !this.isActive;
    },
    UsingTheApplication() {
      this.isUsingVisible = true;
      this.$nextTick(() => {
        this.$refs.UsingTheApplication.visible = true;
        console.log(this.$refs.UsingTheApplication);
      });
    }
  }
});
</script>

<style lang="less" scoped>
/deep/.el-tabs__item {
  padding: 0px 75px;
}
.el-form {
  margin-left: 80px;
}
/deep/.el-form-item {
  margin-right: 70px;
  /deep/.lable {
    margin-right: 10px;
  }
}
.active {
  display: none;
}
.file {
  display: flex;
  margin-top: 20px;
  border-top: 2px solid rgb(240, 242, 245);
  img {
    width: 20px;
    height: 20px;
    margin-top: 18px;
  }
  div {
    margin-left: 10px;
    p {
      cursor: pointer;
      font-size: 16px;
      color: rgb(71, 129, 199);
    }
  }
}
</style>
